<template>
  <div id='map-container' style="width: 100%; height: 600px;">
  </div>
  <div>
    <button @click="handleMarker()">标记</button>
    <button @click="handlePolyline()">折线</button>
    <button @click="handleTextmark()">文本标记</button>

  </div>
</template>

<script>
import "../../amap/AMap3.js"

export default {
  data() {
    return {
      mapObj: null,
    }
  },

  methods: {
    initMap() {
      // 自定义地图层
      const base_url = "/"
      const layers = [new AMap.TileLayer({
        getTileUrl: function (x, y, z) {
          return `${base_url}MAP_zxy/${z}/${x}/${y}.png`;
        },
        opacity: 1,
        zIndex: 99,
      })]


      this.mapObj = new AMap.Map('map-container', { // 设置地图容器id
        resizeEnable: true,
        zoom: 15,
        rotateEnable: true,
        pitchEnable: true,
        center: [119.998980, 31.791340],
        defaultCursor: 'pointer',
        showLabel: true,  //是否显示文字标注
        layers: layers,
      })
    },

    handleMarker() {
      const marker = new AMap.Marker({
        position: [119.998980, 31.791340], //位置
      });
      this.mapObj.add(marker); //添加到地图
    },

    handlePolyline() {
      const lineArr = [
        [119.998980, 31.791340],
        [119.992980, 31.791340],
        [119.998879, 31.792332]
      ];
      const polyline = new AMap.Polyline({
        path: lineArr, //设置线覆盖物路径
        strokeColor: "red", //线颜色
        strokeWeight: 5, //线宽
        strokeStyle: "solid", //线样式
      });
      this.mapObj.add(polyline);
    },

    handleTextmark() {
      // 创建纯文本标记
      let text = new AMap.Text({
        text: '粤电花都燃气电厂',
        anchor: 'center', // 设置文本标记锚点
        draggable: true,
        cursor: 'pointer',
        angle: 10,
        style: {
          'padding': '.75rem 1.25rem',
          'margin-bottom': '1rem',
          'border-radius': '.25rem',
          'background-color': 'white',
          'width': '10rem',
          'border-width': 0,
          'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
          'text-align': 'center',
          'font-size': '20px',
          'color': 'blue'
        },
        position: [119.998980, 31.792240]
      });
      text.setMap(this.mapObj);

      let text1 = new AMap.Text({
        text: '双一橡胶',
        anchor: 'center', // 设置文本标记锚点
        draggable: true,
        cursor: 'pointer',
        angle: 10,
        style: {
          'padding': '.75rem 1.25rem',
          'margin-bottom': '1rem',
          'border-radius': '.25rem',
          'background-color': 'white',
          'width': '10rem',
          'border-width': 0,
          'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
          'text-align': 'center',
          'font-size': '20px',
          'color': 'blue'
        },
        position: [119.998879, 31.792332]
      });
      text1.setMap(this.mapObj)
    },
  },

  mounted() {
    this.initMap()
  }
}

</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
